<template>
  <view class="order-detail-container">
    <view class="status bold">
      {{info.status_text}}
    </view>
    <view class="m1">
      <view class="c1 fr-c">
        <view class="bt bold">在线付</view>
        <view class="val bold f30 flex">￥{{info.pay_price}}</view>
        <image class="icon" src="/static/icon/arrow-icon.png"></image>
      </view>
      <view class="c2 fr-cs">
        <view class="f24">{{timeStr}} {{info.hotel.check_in_time}}后-不可取消</view>
        <image class="icon" src="/static/icon/arrow-icon.png"></image>
      </view>
    </view>
    <view class="m2">
      <view class="b1">
        <view class="c1 fr-c">
          <image class="photo" mode="aspectFill" :src="'https://xt.vipsups.com' + info.hotel.image"></image>
          <view class="infos flex">
            <view class="name-box fr-cf">
              <view class="name f30 bold">{{info.hotel.hotel_name}}</view>
              <image class="icon" src="/static/icon/arrow-icon.png"></image>
            </view>
            <view class="addr f24">{{info.hotel.address}}</view>
          </view>
        </view>
        <view class="c2 fr-cs f24">
          <view class="tag" @click="contact">联系酒店</view>
          <!-- <view class="tag">设施政策</view> -->
          <view class="tag" @click="openLocation">地图</view>
        </view>
      </view>
      <view class="b2 f30 bold">
        <view class="item fr-cf">
          <view class="dot"></view>
          <view class="txt">入住：{{timeStr}} {{info.start_week}} {{info.hotel.check_in_time}}后</view>
        </view>
        <view class="item fr-cf">
          <view class="dot"></view>
          <view class="txt">离店：{{endStr}} {{info.end_week}} {{info.hotel.check_out_time}}后</view>
        </view>
      </view>
    </view>
    <view v-if="info && info.room_type" class="m3">
      <view class="bt fr-cf">
        <image class="icon" src="/static/icon/bed-icon.png"></image>
        <view class="name f30 bold">{{info.room_type.name}} {{info.day_text}}</view>
      </view>
      <view class="info tc">{{info.room_type.label}}</view>
      <!-- <view class="bt fr-cf">
        <image class="icon" src="/static/icon/meal-icon.png"></image>
        <view class="name f30 bold">餐食信息</view>
      </view>
      <view class="info">1月9日 1份早餐/间</view>
      <view class="info">另可于酒店柜台额外购买早餐</view> -->
    </view>
    <view class="m4">
      <view class="bt">预订信息</view>
      <!-- <view class="cell">
        <view class="label">入住必读</view>
        <view class="value">其他办理入住方式</view>
      </view> -->
      <view class="cell">
        <view class="label">订单号</view>
        <view class="value">{{info.orders_no}}</view>
      </view>
      <view class="cell">
        <view class="label">确认号</view>
        <view class="value">{{info.confirm_orders}}</view>
      </view>
      <view class="cell">
        <view class="label">支付方式</view>
        <view class="value">微信小程序 ¥{{info.pay_price}}</view>
      </view>
      <!-- <view class="cell">
        <view class="label">下单时间</view>
        <view class="value">2024年1月8日 14:07</view>
      </view> -->
    </view>
    <view class="m4">
      <view class="bt">发票信息</view>
      <view class="ticket-box">
        <view class="left">
          <view class="t1">本单由溪棠酒店开票</view>
          <view class="t2">仅开普票｜仅支持数电票｜合并修改</view>
        </view>
        <view class="btn">报销凭证</view>
      </view>
    </view>
  
    <!-- <view class="bottom-fixed-btn" style="flex-wrap: wrap;">
      <view class="u-flex u-col-center u-row-center" style="width: 100%;">
        <view class="btn">报销凭证</view>
        <view class="btn">再次预订</view>
        <view class="btn">酒店确认函</view>
        <view class="btn" v-if="info.status === 4" @click="showCart = true">评价</view>
      </view>
      <zb-ipx />
    </view> -->
    
    <zb-ipx />
    
    <u-popup v-model="showCart" :popup="false" mode="bottom" border-radius="20" @close="closePup" :closeable="true">
      <view class="paddLR comments">
        <view class="title">评价</view>
        <u-form :model="formData">
          <u-form-item label="评论" prop="content" label-width="80" class="abc">
            <textarea cols="30" rows="5" v-model="formData.content" class="textarea" placeholder="维修描述"></textarea>
          </u-form-item>
          <u-form-item label="图片" prop="house_img_list" label-width="80">
            <u-upload width="150" height="150" ref="uUpload" :fileList="images" @on-uploaded="onUploaded"
              @on-remove="onRemove" :action="uploadurl" :header="header" :form-data="formdata"></u-upload>
          </u-form-item>
          <u-button type="primary" hover-class="none" shape="circle" @click="commentsSubmit">确认提交</u-button>
        </u-form>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import moment from 'moment/moment';
  
  export default {
    data() {
      return {
        info: {
          hotel: {
            check_in_time: '',
            check_out_time: ''
          }
        },
        showCart:false,
        formData:{
          orders_id:'',
          content:'',
          images:''
        },
        images:[]
      };
    },
    computed: {
      timeStr() {
        return moment(this.info.start_time).format('MM月DD日')
      },
      endStr() {
        return moment(this.info.end_time).format('MM月DD日')
      },
      header() {
      	return {
      		token: this.vuex_token || '',
      	};
      },
      formdata() {
      	let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
      	let isObj = this.$u.test.object(multipart);
      	if (isObj) {
      		return this.vuex_config.config.upload.multipart;
      	}
      	return {};
      },
      uploadurl() {
      	if (!this.vuex_config.upload) {
      		return '';
      	}
      	return this.vuex_config.upload.uploadurl;
      }
    },
    methods: {
      // 评价提交
      commentsSubmit(){
        const data = {
          content: this.formData.content,
          images: this.formData.images.join(','),
          orders_id: this.info.id
        }
        this.$api.commentAddApi(data).then(res=>{
          if(res.code === 1){
            uni.showToast({
              title:'提交成功',
              icon:'none'
            })
          }
          this.showCart = false;
        })
        console.log(this.formData, '---', data)
        
      },
      // 评价图片
      onUploaded(e, name) {
      	console.log(e, name);
          console.log('images--->',this.images)
          this.formData.images = e.map(item => {
            return item.response && item.response.code === 1 && item.response.data.url ? item.response.data.url : item.url.replace(this.http,'');
          })
          console.log('this.formData.img------------>',this.formData.images)
      },
      onRemove(index, lists, name) {
      	this.images = lists
      		.map(item => {
      			return item.response.data.url;
      		})
      		.join(',');
      },
      
      closePup(){
        this.showCart = false
      },
      contact() {
        uni.makePhoneCall({
          phoneNumber: this.info.mobile
        })
      },
      openLocation() {
        uni.openLocation({
          latitude: Number(this.info.hotel.lat),
          longitude: Number(this.info.hotel.lng),
          name: this.info.hotel.hotel_name,
        })
      }
    },
    onLoad(options) {
      this.$api.orderDetailApi(options).then(res => {
        this.info = res.data
      })
    }
  }
</script>

<style lang="scss" scoped>
  .comments{
    padding-bottom: 60rpx;
    .textarea {
      border: 1px solid #ededed;
      padding: 20rpx;
      box-sizing: border-box;
      display: block; margin-bottom: 20rpx;
      width: 100%;
    }
    .title{
      padding: 20rpx 0; font-weight: 32rpx; font-weight: bold;
    }
  }
  /deep/.abc .u-form-item__body{align-items: self-start !important;}
  .wrap {
    background-color: #fff !important;
    padding: 0 30rpx 80rpx;
  }
  
  
.order-detail-container {
  overflow: hidden;
  padding-bottom: calc(86rpx + env(safe-area-inset-bottom));
  .icon {
    width: 32rpx;
    height: 32rpx;
  }
  .status {
    width: 100%;
    height: 156rpx;
    line-height: 156rpx;
    padding-left: 32rpx;
    box-sizing: border-box;
    background: linear-gradient( 90deg, #538AF7 0%, #2A70F9 100%);
    font-size: 44rpx;
    color: #FFFFFF;
    position: relative;
    &::after {
      content:'';
      width: 100%;
      height: 30rpx;
      background: linear-gradient( 90deg, #538AF7 0%, #2A70F9 100%);
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
    }
  }
  .m1 {
    background-color: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 30rpx 30rpx 0 0;
    margin-bottom: 20rpx;
    .c1 {
      @include flex;
      height: 120rpx;
      box-shadow: 0 1px 0 #eee;
      .bt {
        font-size: 36rpx;
        font-weight: bold;
        color: #3C3D3E;
        margin-right: 16rpx;
      }
      .val {
        color: #2A70F9;
      }
    }
    .c2 {
      height: 96rpx;
    }
  }
  .m2 {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 30rpx 30rpx 0;
    overflow: hidden;
    .b1 {
      box-shadow: 0 1px 0 #eee;
      .c1 {
        .photo {
          display: block;
          width: 198rpx;
          height: 134rpx;
          border-radius: 16rpx;
          overflow: hidden;
          margin-right: 20rpx;
        }
        .infos {
          .name-box {
            margin-bottom: 30rpx;
            .name {
              line-height: 42rpx;
              margin-right: 20rpx;
            }
          }
          .addr {
            line-height: 34rpx;
            color: #333333;
          }
        }
      }
      .c2 {
        padding: 20rpx 0;
        .tag {
          width: 336rpx;
          height: 54rpx;
          line-height: 54rpx;
          text-align: center;
          background: #F5F6FA;
          border-radius: 8rpx;
        }
      }
    }
    .b2 {
      padding: 10rpx 0;
      position: relative;
      &::before {
        content:'';
        width: 8rpx;
        height: 54rpx;
        background: #EBF3FE;
        position: absolute;
        left: 4rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .item {
        height: 62rpx;
        position: relative;
        z-index: 2;
        .dot {
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background: #2A70F9;
          margin-right: 14rpx;
        }
      }
    }
  }
  .m3 {
    background-color: #fff;
    margin-bottom: 20rpx;
    padding: 0 30rpx 18rpx;
    box-sizing: border-box;
    overflow: hidden;
    .bt {
      margin: 30rpx 0;;
      .icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
      }
    }
    .info {
      height: 54rpx;
      line-height: 54rpx;
      background: #F5F6FA;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #333;
      padding: 0 54rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      &.tc {
        text-align: center;
        padding: 0;
      }
    }
  }
  .m4 {
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    margin: 30rpx 0;
    overflow: hidden;
    .bt {
      font-size: 30rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 30rpx;
    }
    .cell {
      font-size: 24rpx;
      line-height: 34rpx;
      margin: 20rpx 0;
      @include flex;
      .label {
        width: 158rpx;
        color: #999;
      }
      .value {
        flex: 1;
        color: #333;
      }
    }
    .ticket-box {
      @include flex;
      .left {
        flex: 1;
        .t1 {
          font-size: 28rpx;
          color: #3C3D3E;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 18rpx;
        }
        .t2 {
          line-height: 34rpx;
          font-size: 24rpx;
          color: #3C3D3E;
        }
      }
      .btn {
        box-sizing: border-box;
        padding: 0 14rpx;
        height: 48rpx;
        line-height: 44rpx;
        border-radius: 8rpx;
        border: 2rpx solid rgba(#2A70F9,0.53);
        font-size: 24rpx;
        color: #2A70F9;
      }
    }
  }
}
.bottom-fixed-btn {
  height: calc(126rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.07);
  @include flex;
  .btn {
    flex: 1;
    margin: 0 10rpx; padding: 0 10rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
    background: #2A70F9;
    border-radius: 4rpx;
  }
}
</style>
